<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算机与信息工程学院 - 首页</title>
    <style>
        /* 简单的CSS样式，仅用于区分不同的语义化区块，方便观察效果 */
        body { font-family: "Microsoft YaHei", sans-serif; margin: 0; padding: 0; line-height: 1.6; }
        header, nav, main, section, aside, footer { padding: 20px; margin-bottom: 10px; border-radius: 5px; }
        
        header { background-color: #3498db; color: white; text-align: center; }
        nav { background-color: #2ecc71; }
        nav a { color: white; margin-right: 15px; text-decoration: none; }
        main { background-color: #ecf0f1; overflow: hidden; /* 解决浮动元素父容器高度塌陷问题 */ }
        section { background-color: #f1c40f; float: left; width: 65%; margin-right: 2%; }
        aside { background-color: #9b59b6; color: white; float: right; width: 30%; }
        footer { background-color: #34495e; color: white; text-align: center; clear: both; } /* clear: both 清除浮动 */
        
        .article-title { border-bottom: 2px solid #e74c3c; padding-bottom: 5px; }
    </style>
</head>
<body>
    <!-- 1. <header>：页面的头部区域，通常包含网站的logo、标题和主导航 -->
    <header>
        <h1>计算机与信息工程学院</h1>
        <p>培养信息技术领域高素质人才的摇篮</p>
    </header>

    <!-- 2. <nav>：专门用于定义页面的导航链接区域 -->
    <nav>
        <a href="#home">首页</a>
        <a href="#about">学院概况</a>
        <a href="#majors">专业设置</a>
        <a href="#faculty">师资队伍</a>
        <a href="#research">科学研究</a>
        <a href="#admission">招生信息</a>
    </nav>

    <!-- 3. <main>：页面的主要内容区域，一个页面建议只有一个 <main> -->
    <main>
        <!-- 4. <section>：用于划分页面中的一个独立主题区域，通常包含一个标题 -->
        <section>
            <h2 class="article-title">学院动态</h2>
            <article>
                <h3>我院成功举办“人工智能前沿技术”学术论坛</h3>
                <p>近日，计算机与信息工程学院成功举办了“人工智能前沿技术”学术论坛。本次论坛邀请了来自清华大学、北京大学等高校的知名专家学者，共同探讨了人工智能领域的最新研究成果与发展趋势...</p>
            </article>
            <article>
                <h3>我院学子在全国大学生计算机设计大赛中喜获佳绩</h3>
                <p>在刚刚结束的第X届全国大学生计算机设计大赛中，我院参赛团队凭借作品《基于AI的智能垃圾分类系统》荣获全国一等奖，另有多支队伍获得二、三等奖...</p>
            </article>
        </section>

        <!-- 5. <aside>：表示与页面主要内容相关但非核心的附属信息，如侧边栏 -->
        <aside>
            <h3>快速链接</h3>
            <ul>
                <li><a href="http://www.most.gov.cn/" style="color: white;">科技部</a></li>
                <li><a href="http://www.edu.cn/" style="color: white;">教育部</a></li>
                <li><a href="http://www.ict.ac.cn/" style="color: white;">中科院计算所</a></li>
            </ul>
            
            <h3>联系方式</h3>
            <p>地址：XX省XX市XX路XX号</p>
            <p>电话：0XXX-XXXXXXXX</p>
            <p>邮箱：info@example.edu.cn</p>
        </aside>
    </main>

    <!-- 6. <footer>：页面的页脚区域，通常包含版权信息、联系方式等 -->
    <footer>
        <p>版权所有 © 2025 计算机与信息工程学院 - 闽南师范大学</p>
        <p>闽ICP备XXXXXXXX号</p>
    </footer>
</body>
</html>